<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签的增删</title>
</head>
<body>

<input type="button" value="添加元素"
       onclick="addElement()">

<input type="button" value="插入元素"
       onclick="insertElement()">

<input type="button" value="删除元素"
       onclick="deleteElement()">

<ul id="ulist">

    <li id="l1">鄂俊峰</li>
    <li id="l2">郑东伟</li>
</ul>


<script>

    function addElement() {
        console.log(this);
        // 每次点击按钮, 都在ul标签中添加一行li
        var l = document.createElement("li");

        l.innerHTML = "随便";

        // 把创建的标签添加到合适的位置.

        // 获得目的位置的父标签
        var ul = document.getElementById("ulist");

        // 在父标签的所有子标签最后添加一个新标签
        ul.appendChild(l);
    }

    function insertElement() {
        // 添加一个新的li元素, 插入到郑东伟前面

        var l = document.createElement("li");
        l.innerHTML = "张博";

        // 获取父标签
        var ul = document.getElementById("ulist");

        // 获取目的标签
        var l2 = document.getElementById("l2");

        // 把l标签添加到l2标签前面
        // ul.insertBefore(l,l2);
        l2.parentNode.insertBefore(l,l2);
    }

    function deleteElement() {
        // 删除标签
        var l1 = document.getElementById("l1");

        var ul = document.getElementById("ulist");

        ul.removeChild(l1);
    }



</script>


</body>
</html>